<template>
  <div>
    <Loading :loading="loading">
      <Form :ref="formRef" :rules="formDataCheckRules" :label-width="110" :model="formData">
        <FormItem prop="name" label="名称:" style="width:90%">
          <Input type="text" v-model="formData.name" placeholder="请输入" />
        </FormItem>
        <FormItem prop="type" label="类型:" style="width:90%">
          <RemoteSelect v-model="formData.type" placeholder="请选择" :api="typeApi" valueKey="code" />
        </FormItem>
        <FormItem prop="clientId" label="应用id:" style="width:90%">
          <Input type="text" v-model="formData.clientId" placeholder="请输入" />
        </FormItem>
        <FormItem prop="clientSecret" label="应用密钥:" style="width:90%">
          <Input type="textarea" :rows="10" v-model="formData.clientSecret" placeholder="请输入" />
        </FormItem>
        <FormItem prop="clientPublicKey" label="应用公钥:" style="width:90%">
          <Input type="textarea" :rows="3" v-model="formData.clientPublicKey" placeholder="请输入" />
        </FormItem>
        <FormItem prop="platformPublicKey" label="平台公钥:" style="width:90%">
          <Input type="textarea" :rows="3" v-model="formData.platformPublicKey" placeholder="请输入" />
        </FormItem>
        <FormItem prop="describe" label="简介:" style="width:90%">
          <Input type="textarea" :rows="3" v-model="formData.describe" placeholder="请输入" />
        </FormItem>
        <FormItem :style="{width: '90%'}">
          <div :style="{textAlign: 'right'}">
            <Button type="primary" @click="handleSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import RemoteSelect from "@/components/RemoteSelect";
import { namespace } from "../module";
import {
  InputNumber,
  Input,
  Button,
  Form,
  FormItem,
  Message
} from "view-design";
import Loading from "@/components/Loading";
import Uuid from "uuid";
export default {
  name: "ThirdApplicationEditView",
  components: {
    InputNumber,
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteSelect
  },
  data: function() {
    let vm = this;
    return {
      formRef: Uuid.v1(),
      formData: {}
    };
  },
  computed: {
    formDataCheckRules: function() {
      return {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
            type: "string"
          }
        ],
        clientId: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        clientSecret: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ]
      };
    },
    typeApi: function() {
      return (
        config.serverProxy +
        config.authServicePath +
        "/thirdApplication/getTypeSelectOptions"
      );
    },
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    }
  },
  beforeMount: async function() {
    let id = this.$route.params.id;
    let response = await this.$store.dispatch(`${namespace}/getDetail`, {
      id: id
    });
    if (response.errorcode === 0) {
      this.formData = response.data;
    }
  },
  methods: {
    handleSubmit: function() {
      let vm = this;
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let formData = vm.formData;
          let response = await vm.$store.dispatch(
            `${namespace}/globalUpdate`,
            formData
          );
          if (response.errorcode === 0) {
            Message.success("提交成功");
            vm.$store.dispatch(`${namespace}/query`);
          }
        }
      });
    }
  }
};
</script>

<style>
</style>